<template>
    <view class="lrl-drag-panel" 
        :class="{'lrl-drag-panel-transition': !isMove}"
        id="lrl-drag-panel"
        :style="{ 
            top: `${ buttonTop }px`,
            left: `${ buttonLeft }px`,
            zIndex: zIndex,
            visibility: show ? 'visible' : 'hidden'
        }" 
        @touchstart="touchStart"
        @touchmove.stop.prevent="touchMove" 
        @touchend="touchEnd"
    >
        <slot></slot>
    </view>
</template>

<script>
    /**
     *  DragPanel 简单拖拽吸附面板
     * @description [app|h5|mp-weixin] 简单拖拽吸附面板，自定义插槽内容拖拽吸附
     * @author liruilin
     * @property {String}             initPosition = [left|right] 初始化时左右吸附位置
     *  @value left 左侧
     *  @value right  右侧
     * @property {Number}             zIndex      
     * @example <lrl-drag-panel>content</lrl-drag-panel>
     */
    export default {
        name: 'lrl-drag-panel',
        props: {
            initTop: {
                type: Number,
                default: 500
            },
            zIndex: {
                type: Number,
                default: 999999
            },
            initPosition: {
                type: String,
                default: 'left'
            }
        },
        data() {
            return {
                buttonLeft: 0,
                buttonTop: 0,
                buttonRight: '',
                startX: 0,
                startY: 0,
                windowWidth: 0,
                boxWidth: 0,
                isMove: false,
                show: false
            };
        },
        created() {
            this.buttonTop = this.initTop
        },
        mounted() {
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = res.windowWidth;
                    this.queryDom(true)
                }
            });
            
        },
        methods: {
            queryDom(isInit){
                uni.createSelectorQuery()
                    .in(this)
                    .select('#lrl-drag-panel')
                    .boundingClientRect(data => {
                      if (data) {
                        this.boxWidth = data.width;
                        if(isInit){
                            this.buttonLeft = this.initPosition === 'left' ? 0 : this.windowWidth - data.width
                            this.$nextTick(() => {
                                setTimeout(() => {
                                     this.show = true
                                }, 300)
                            })
                        }
                      }
                    })
                    .exec();
            },
            touchStart(event) {
                this.queryDom()
                this.isMove = true
                this.startX = event.touches[0].clientX - event.currentTarget.offsetLeft;
                this.startY = event.touches[0].clientY - event.currentTarget.offsetTop;
            },
            touchMove(event) {
                const moveX = event.touches[0].clientX - this.startX;
                const moveY = event.touches[0].clientY - this.startY;
                let realityX = 0
                if (moveX < 0) {
                    realityX = 0
                } else if (moveX > this.windowWidth - event.currentTarget.offsetWidth) {
                    realityX = this.windowWidth - event.currentTarget.offsetWidth 
                } else {
                    realityX = moveX 
                }
                this.buttonLeft = Math.min(realityX, this.windowWidth - this.boxWidth) 
                
                this.buttonTop = moveY 
            },
            touchEnd(event) {
                // const buttonWidth = event.currentTarget.offsetWidth;
                const buttonWidth = this.boxWidth;
                const currentPosition = parseInt(this.buttonLeft) + buttonWidth / 2;
                
                this.isMove = false
                this.$nextTick(() => {
                    if (currentPosition < this.windowWidth / 2) {
                        this.buttonLeft = 0;
                    } else {
                        this.buttonLeft = this.windowWidth - buttonWidth;
                    }
                })
                
            }
        }
    };
</script>

<style>
    .lrl-drag-panel {
        position: fixed;
/*        width: 80rpx;
        height: 80rpx;
        background-color: #007aff;
        border-radius: 50%; */
    }
    .lrl-drag-panel-transition{
        transition: all 0.3s ease-in-out;
    }
</style>